<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template style>
  <!-- 上按钮 -->
  <el-card style="margin: 4px">
    <el-button-group style="margin-right: 4px">
      <el-button @click="addattribute"
        ><el-icon><Plus /></el-icon>添加属性行</el-button
      >
      <el-button @click="addcustom"
        ><el-icon><CirclePlus /></el-icon>添加自定义列</el-button
      >
    </el-button-group>
    <el-button-group style="margin-right: 4px">
      <el-button @click="variable"
        ><el-icon><InfoFilled /></el-icon>变量库</el-button
      >
      <el-button @click="consta"
        ><el-icon><Menu /></el-icon>常量库</el-button
      >
      <el-button @click="parameter"
        ><el-icon><TrendCharts /></el-icon>参数库</el-button
      >
      <el-button @click="action"
        ><el-icon><Baseball /></el-icon>动作库</el-button
      >
    </el-button-group>
    <el-button-group style="margin-right: 4px">
      <el-button
        ><el-icon><DocumentAdd /></el-icon>保存</el-button
      >
      <el-button
        ><el-icon><DocumentCopy /></el-icon>保存新版本</el-button
      >
    </el-button-group>
  </el-card>
  <!-- 备注 -->
  <button @click="btns">
    备注:
    <el-icon v-if="btn"><CaretRight /></el-icon>
    <el-icon v-else><CaretBottom /></el-icon>
  </button>
  <el-input
    v-if="!btn"
    v-model="textarea"
    autosize
    type="textarea"
    placeholder="数据库数据绑定"
    style="padding-bottom: 10px"
  />
  <!-- 权重 -->
  <el-form ref="queryRef" :inline="true">
    <el-form-item
      label="权重："
      prop="userName"
      style="border: 1px solid #000; padding-left: 10px; width: 220px"
    >
      <el-radio-group v-model="radio1" class="ml" border>
        <el-radio label="1" size="default">支持</el-radio>
        <el-radio label="0" size="default">不支持</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 名称 -->
    <el-form-item label="名称：" prop="phonenumber">
      <el-input clearable style="width: 220px" />
    </el-form-item>
    <!-- 添加属性 -->
    <el-dropdown trigger="click">
      <span
        style="
          line-height: 32px;
          display: inline-block;
          border: 1px solid #999;
          border-radius: 4px;
          padding: 0 10px;
        "
      >
        添加属性<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :icon="Plus">优先级</el-dropdown-item>
          <el-dropdown-item :icon="CirclePlusFilled">生效日期</el-dropdown-item>
          <el-dropdown-item :icon="CirclePlus">失效日期</el-dropdown-item>
          <el-dropdown-item :icon="Check">是否启用</el-dropdown-item>
          <el-dropdown-item :icon="CircleCheck"
            >允许调试信息输出</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-form>
  <el-table :data="tableData" border :span-method="objectSpanMethod">
    <el-table-column prop="property" label="属性" min-width="160">
      请选择属性：<el-tooltip
        placement="top"
        content="删除当前属性行"
        effect="dark"
      >
        <el-icon
          style="
            margin-right: 14px;
            color: red;
            cursor: pointer;
            font-size: 16px;
          "
          @click="icondelete"
          ><CloseBold
        /></el-icon>
      </el-tooltip>
      <el-tooltip placement="top" content="添加条件行" effect="dark">
        <el-icon
          style="color: green; cursor: pointer; font-size: 16px"
          @click="iconadd"
          ><CirclePlus
        /></el-icon>
      </el-tooltip>
      <div v-if="radio1 == true">
        权重：<el-input v-model="input1" size="small" style="width: 80px" />
      </div>
    </el-table-column>

    <el-table-column v-model="condition" label="条件" min-width="160">
      {{ not }}
      <el-tooltip placement="top" content="配置条件" effect="dark">
        <el-icon
          style="
            color: black;
            cursor: pointer;
            font-size: 16px;
            vertical-align: middle;
          "
          @click="iconset"
          ><Setting
        /></el-icon>
      </el-tooltip>
    </el-table-column>

    <el-table-column prop="score" label="分值" min-width="160" />
  </el-table>
  <!-- 下边框 -->
  <div
    style="
      margin-top: 10px;
      border: 1px solid #999;
      border-radius: 6px;
      padding: 10px;
    "
  >
    <el-form-item prop="phonenumber">
      得分计算方式：
      <el-select v-model="select" style="width: 115px">
        <el-option label="求和" value="1" />
        <el-option label="加权求和" value="2" />
        <el-option label="自定义" value="3" />
      </el-select>
      <div v-if="select == '3'" style="margin-left: 10px">
        自定义计算得分的Bean ID：<el-input
          v-model="input1"
          size="small"
          style="width: 160px"
        />
      </div>
    </el-form-item>
    <div style="line-height: 32px">
      将得分值赋给：
      <el-dropdown v-model="select1" trigger="click">
        <span style="line-height: 32px">不赋值</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="Plus">选择变量</el-dropdown-item>
            <el-dropdown-item icon="CirclePlus">选择参数</el-dropdown-item>
            <el-dropdown-item icon="Check">不赋值</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import type { TableColumnCtx } from "element-plus";
import { ref } from "vue";

const not = ref("无");
const condition = ref();
const select = ref("1");
const input1 = ref("");
const select1 = ref("");
const btn = ref(true);
const textarea = ref("");
const radio1 = ref(false);
const tableData = ref([] as any[]);

//添加列
const addcustom = () => {
  ElMessageBox.prompt("", "请输入列名", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  })
    .then(({ value }) => {
      console.log(value);
      ElMessage({
        type: "success",
        message: "创建成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消创建",
      });
    });
};
// 删除属性行
function icondelete() {
  ElMessageBox.confirm("删除当前属性行", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}

//设置条件
function iconset() {
  ElMessageBox.alert("", "配置条件", {})
    .then(() => {
      console.log(1);
    })
    .catch(() => {
      console.log(2);
    });
  console.log(111, "设置条件");
}

function addattribute() {
  tableData.value.push({
    property: "",
    condition: "",
    score: "",
    rowspan: 1,
  });
}
// 做行合并的方法
interface TableRowType {
  property: string;
  condition: string;
  score: string;
  rowspan: number;
}
interface SpanMethodProps {
  row: TableRowType;
  column: TableColumnCtx<TableRowType>;
  rowIndex: number;
  columnIndex: number;
}
const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  return {
    rowspan: row.rowspan,
    colspan: 1,
  };
};
// 添加条件行
function iconadd() {
  tableData.value.push({
    condition: "111",
    score: "2222",
  });
  console.log("添加条件行", 2222222, tableData);
}
//变量库
function variable() {
  ElMessageBox.alert("变量库文件", "变量库", {
    confirmButtonText: "确认",
  })
    .then(({ value }) => {
      console.log(value);
    })
    .catch(() => {
      console.log("变量库", 222222);
    });
  console.log("变量库", 2222222);
}
//常量库
function consta() {
  ElMessageBox.alert("常量库文件", "常量库", {
    confirmButtonText: "确认",
  })
    .then(({ value }) => {
      console.log(value);
    })
    .catch(() => {
      console.log("常量库", 2222222);
    });
  console.log("常量库", 2222222);
}
//参数库
function parameter() {
  ElMessageBox.alert("参数库文件", "参数库", {
    confirmButtonText: "确认",
  })
    .then(({ value }) => {
      console.log(value);
    })
    .catch(() => {
      console.log("参数库", 2222222);
    });
  console.log("参数库", 2222222);
}
//动作库
function action() {
  ElMessageBox.alert("动作库文件", "动作库", {
    confirmButtonText: "确认",
  })
    .then(({ value }) => {
      console.log(value);
    })
    .catch(() => {
      console.log("动作库", 2222222);
    });
  console.log("动作库", 2222222, tableData);
}

function btns() {
  btn.value = !btn.value;
}
</script>
<style>
.el-card__body {
  height: 40px;
  padding: 4px 10px 10px 10px !important;
}
</style>
